{% extends "log_base.html" %}
{% block title %}注册{% endblock %}
{% block content %}
<section class="login-maintop">
	<div class="login-main">
		<header><h1>知识与你分享</h1></header>
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}" style="width: 300px;margin: 0 auto">{{ message }}</div>
        {% endfor %}
		<div class="login-form" id="TB">
			<h2>❀ 注册 ❀</h2>
            <form name="my form" action="." method="POST" enctype="multipart/form-data" onsubmit="return validateForm();">
            {% csrf_token %}
                <span><i class="fa fa-user-o" aria-hidden="true"></i></span>
				<input type="text" name="username" id="idusername" placeholder="请输入用户名" required=""><br>
                <div style="text-align: center;">
                男 ♂：<input type="radio" name="sex" checked="checked" value=1>&nbsp;&nbsp;&nbsp;&nbsp;
                女 ♀：<input type="radio" name="sex" value=0>
                </div><br>

				<span><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
				<input type="password" name="password" id="idpassword" placeholder="请输入密码" required="">

                <span><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
                <input type="password" name="repassword" id="idrepassword" placeholder="请再次输入密码" required="">

                <span><i class="fa fa-envelope" aria-hidden="true"></i></span>
                <input type="text" name="email" placeholder="请输入您的邮箱" required="">
                <div align="center">
                    <a href="javascript:;" class="file">上传头像
                        <td><input id="id_uploadavatar" type="file" name="avatar" accept=".jpg,.jpeg,.png,.bmp,.gif"></td>
                    </a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#dropzone1" class="file">预览头像
                    </a>
                </div>
				<input type="submit" value="注册" style="margin-top: 10px">
            </form>

<div class="row">
    <div class="col-lg-12">
        <div class="dropzone-pro shadow-reset nt-mg-b-30" id="TB">
            <div id="dropzone1">
                <form action="/upload" class="dropzone dropzone-custom needsclick dz-clickable" id="TB">
                    <div class="dz-message needsclick download-custom">
                        <span class="adminpro-icon adminpro-cloud-computing-down download-icon"></span>
                        <h2 style="color:black;">头像预览</h2>
                        <p><span class="note needsclick">(点击白色部分可添加多个头像预览)</span>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


			<div class="login-password">
				<a href="/login/" style="margin-left: 55px">>>>已有账号,点击登录<<<</a>
				<a href="#"></a>
			</div><br>
			<div class="login-input">

			</div>
			<div class="social-icons">
				<ul>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
				</ul>

			</div>
		</div>
		<!--footer-->
		<div class="footer">
			<p>Copyright 广州大学松田学院 ©2023 版权所有·侵版必究</p>
		</div>
		<!--footer-->
	</div>
</section>
<script>
    function validateForm() {
        pwd = document.getElementById("idpassword").value
        repwd = document.getElementById("idrepassword").value
        if (pwd == repwd) {
            return true
        } else {
            window.alert("两次密码不一致")
            return false
        }
    }
</script>
    <!-- jquery
		============================================ -->
    <script src="/static/js/vendor/jquery-1.11.3.min.js"></script>
    <!-- bootstra/static/p JS
		============================================ -->
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- meanmenu/static/ JS
		============================================ -->
    <script src="/static/js/jquery.meanmenu.js"></script>
    <!-- mCustomS/static/crollbar JS
		============================================ -->
    <script src="/static/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- sticky J/static/S
		============================================ -->
    <script src="/static/js/jquery.sticky.js"></script>
    <!-- scrollUp/static/ JS
		============================================ -->
    <script src="/static/js/jquery.scrollUp.min.js"></script>
    <!--  dropzon/static/e JS
		============================================ -->
    <script src="/static/js/dropzone.js"></script>
    <!-- main JS/static/
		============================================ -->
    <script src="/static/js/main.js"></script>
{% endblock %}